<template>
  <!--End Menu End-->
  <div class="i_bg">
    <div class="postion">
      <span class="fl">
        全部 >
        <span v-for="category1 in categoryList" :key="category1.id">
          <span>
            <router-link
              :to="{
                name: 'productOfCategory',
                query: { id: category1.id },
              }"
              >{{ category1.name }}</router-link
            ></span
          >

          >
        </span>
        {{ product.name }}
      </span>
    </div>
    <div class="content">
      <div id="tsShopContainer">
        <div id="tsImgS">
          <img
            :src="`http://192.168.1.146:8088/${product.fileName}`"
            width="390"
            height="390"
          />
        </div>
      </div>

      <div class="pro_des">
        <div class="des_name">
          <p>{{ product.name }}</p>
        
          “开业巨惠，北京专柜直供”，不光低价，“真”才靠谱！
        </div>
        <div class="des_price">
          本店价格：<b>￥{{ product.price }}</b
          ><br />
          库存:<span>{{product.stock}}件</span>&nbsp;&nbsp;
          消费积分：<span>28R</span><br/>
          
        </div>
        
        <div class="des_share">
          <div class="d_sh">
            分享
            <div class="d_sh_bg">
              <a href="#"><img src="http://192.168.1.146:8088/sh_1.gif" /></a>
              <a href="#"><img src="http://192.168.1.146:8088/sh_2.gif" /></a>
              <a href="#"><img src="http://192.168.1.146:8088/sh_3.gif" /></a>
              <a href="#"><img src="http://192.168.1.146:8088/sh_4.gif" /></a>
              <a href="#"><img src="http://192.168.1.146:8088/sh_5.gif" /></a>
            </div>
          </div>
          <div class="d_care">
            <a @click="addCollect">关注商品</a>
          </div>
        </div>
        <div class="des_join">
          <div class="j_nums">
            <input
              type="text"
              v-model="productCount"
              name=""
              class="n_ipt"
              @blur="checkCount"
            />
            <input type="button" value="" @click="addUpdate" class="n_btn_1" />
            <input type="button" value="" @click="jianUpdate" class="n_btn_2" />
          </div>
          <span class="fl"
            ><a @click="ShowDiv_1"
              ><img src="http://192.168.1.146:8088/j_car.png" /></a
          ></span>
        </div>
      </div>

      <div class="s_brand">
        <div class="s_brand_img">
          <img
            :src="`http://192.168.1.146:8088/${product.fileName}`"
            width="188"
            height="132"
          />
        </div>
        <div class="s_brand_c">
          <router-link
            v-for="category in categoryList"
            :key="category.id"
            :to="{
              name: 'productOfCategory',
              query: { id: category.id },
            }"
          >
            <span v-if="category.type == 1">进入品牌专区</span></router-link
          >
        </div>
      </div>
    </div>

    <div class="content mar_20">
      <ProductCollect ref="productCollect"></ProductCollect>
      <div class="l_list">
        <div class="des_border">
          <div class="des_tit">
            <ul>
              <li class="current">推荐搭配</li>
            </ul>
          </div>
          <div class="team_list">
            <div class="img">
              <a href="#"
                ><img
                  src="http://192.168.1.146:8088/mat_1.jpg"
                  width="160"
                  height="140"
              /></a>
            </div>
            <div class="name"><a href="#">倩碧补水组合套装8折促销</a></div>
            <div class="price">
              <div class="checkbox">
                <input type="checkbox" name="zuhe" checked="checked" />
              </div>
              <font>￥<span>768.00</span></font> &nbsp; 18R
            </div>
          </div>
          <div class="team_icon">
            <img src="http://192.168.1.146:8088/jia_b.gif" />
          </div>
          <div class="team_list">
            <div class="img">
              <a href="#"
                ><img
                  src="http://192.168.1.146:8088/mat_2.jpg"
                  width="160"
                  height="140"
              /></a>
            </div>
            <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
            <div class="price">
              <div class="checkbox"><input type="checkbox" name="zuhe" /></div>
              <font>￥<span>749.00</span></font> &nbsp; 18R
            </div>
          </div>
          <div class="team_icon">
            <img src="http://192.168.1.146:8088/jia_b.gif" />
          </div>
          <div class="team_list">
            <div class="img">
              <a href="#"
                ><img
                  src="http://192.168.1.146:8088/mat_3.jpg"
                  width="160"
                  height="140"
              /></a>
            </div>
            <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
            <div class="price">
              <div class="checkbox">
                <input type="checkbox" name="zuhe" checked="checked" />
              </div>
              <font>￥<span>749.00</span></font> &nbsp; 18R
            </div>
          </div>
          <div class="team_icon">
            <img src="http://192.168.1.146:8088/equl.gif" />
          </div>
          <div class="team_sum">
            套餐价：￥<span>1517</span><br />
            <input type="text" value="1" class="sum_ipt" /><br />
            <a href="#"><img src="http://192.168.1.146:8088/z_buy.gif" /></a>
          </div>
        </div>
        <div class="des_border">
          <div class="des_tit">
            <ul>
              <li class="current"><a href="#p_attribute">商品属性</a></li>
              <li><a href="#p_details">商品详情</a></li>
              <li><a href="#p_comment">商品评论</a></li>
            </ul>
          </div>
          <div class="des_con" id="p_attribute">
            <table
              border="0"
              align="center"
              style="width: 100%; font-family: '宋体'; margin: 10px auto"
              cellspacing="0"
              cellpadding="0"
            >
              <tr>
                <td>商品名称：{{ product.name }}</td>
                <td>商品编号：{{ product.id }}</td>
                <td>品牌： 迪奥（Dior）</td>
                <td>上架时间：2015-09-06 09:19:09</td>
              </tr>
              <tr>
                <td>商品毛重：160.00g</td>
                <td>商品产地：法国</td>
                <td>香调：果香调香型：淡香水/香露EDT</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>容量：1ml-15ml</td>
                <td>类型：女士香水，Q版香水，组合套装</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
          </div>
        </div>

        <div class="des_border" id="p_details">
          <div class="des_t">商品详情</div>
          <div class="des_con">
            <table
              border="0"
              align="center"
              style="width: 745px; font-size: 14px; font-family: '宋体'"
              cellspacing="0"
              cellpadding="0"
            >
              <tr>
                <td width="265">
                  <img
                    :src="`http://192.168.1.146:8088/${product.fileName}`"
                    width="206"
                    height="412"
                  />
                </td>
                <td>
                  <b>{{ product.name }}(Q版)</b><br />
                </td>
              </tr>
            </table>

            <p align="center">
              <img
                :src="`http://192.168.1.146:8088/${product.fileName}`"
                width="746"
                height="425"
              /><br /><br />
             
            </p>
          </div>
        </div>

      </div>
    </div>

    <!--Begin 弹出层-加入购物车 Begin-->
    
    <div id="fade1" class="black_overlay"></div>
    <div id="MyDiv1" class="white_content" :class="{show:car.isShowCar}">
      <div class="white_d">
        <div class="notice_t">
          <span
            class="fr"
            style="margin-top: 10px; cursor: pointer"
            @click="car.isShowCar=false"
            ><img src="http://192.168.1.146:8088/close.gif"
          /></span>
        </div>
        <div class="notice_c">
          <table
            border="0"
            align="center"
            style="margin-top: "
            cellspacing="0"
            cellpadding="0"
          >
            <tr valign="top">
              <td width="40">
                <img src="http://192.168.1.146:8088/suc.png" />
              </td>
              <td >
                <span style="color: #3e3e3e; font-size: 18px; font-weight: bold"
                  >{{car.message}}</span
                ><br />
              </td>
            </tr>
            <tr height="50" valign="bottom">
              <td>&nbsp;</td>
              <td>
                <a href="#" class="b_sure">去购物车结算</a
                ><a href="#" class="b_buy" @click="car.isShowCar=false">继续购物</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
    <!--End 弹出层-加入购物车 End-->
  
</template>

<script>
import ProductCollect from "./ProductCollect.vue";

export default {
  components: {
    ProductCollect,
  },
  name: "productDetail",
  data() {
    return {
      product: {},
      categoryList: {},
      id: 0,
      productCount: 1,
     car:{
      isShowCar:false,
     
      message:""
     }
    };
  },
  methods: {
    getProduct() {
      this.id = this.$route.query.id;
      this.$axios({
        method: "post",
        data: {
          id: this.id,
        },
        url: "api/product/getProductById",
      })
        .then((rs) => {
          this.product = rs.data.product;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    addUpdate() {
      console.log("添加");
      this.productCount++;
    },
    jianUpdate() {
      console.log("减去");
      if (this.productCount >= 2) {
        this.productCount--;
      }
    },
    ShowDiv_1() {
      let token=sessionStorage.getItem("token");
      this.car.isShowCar=true;
     if(token==null){
      this.car.message="请登录";
     
        return ;
     }
     if(this.productCount>this.product.stock){
      this.car.message="商品库存不足";
    
        return;
     }
        this.$axios({
          method:"post",
          url:"api/order/addShoppingCar",
          data:{
            token,
            productId:this.id,
            quantity:this.productCount
          }
        })  .then((rs) => {
          this.car.message=rs.data.result;
      
          this.$parent.getShoppingCar();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    checkCount() {
      console.log("检查");
      let reg = /^[1-9]\\d*$/;
      if (!reg.test(this.productCount)) {
        this.productCount = 1;
      }
    },
    getCategoryByProduct() {
      this.id = this.$route.query.id;
      this.$axios({
        method: "post",
        data: {
          id: this.id,
        },
        url: "api/product/getCategoryByProductId",
      })
        .then((rs) => {
          this.categoryList = rs.data.categoryList;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    addCollect() {
    this.$refs.productCollect.addCollect(this.id);
    },
  },
  watch: {
    "$route.query.id": function (newId, oldId) {
      console.log(`id 从 ${oldId} 变更为 ${newId}`);
      this.getProduct();
      this.getCategoryByProduct();
    },
  },
  mounted() {
    this.getProduct();
    this.getCategoryByProduct();
  },
};
</script>

<style>
.show{
  display: block;
}
</style>